
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		/* .popup_select_componentbtn{
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 100px;
			height: 40px;
			background-color: rgb(0,64,165);
			border-radius: 5px;
			color: rgb(225,225,225);
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			cursor: pointer;
			border:none;
			outline: none;
		} */
		.sendbtn,.addbtn{
			width: 100px;
			height: 40px;
			background-color: rgb(0,64,165);
			border-radius: 5px;
			color: rgb(225,225,225);
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			cursor: pointer;
			border:none;
			outline: none;
		}
		.close{
			position: absolute;
			right: 8px;
			top: 0px;
			font-size: 22px;
			user-select: none;
			font-style:normal;
			cursor: pointer;
			color: #fff;
			-webkit-tap-highlight-color:rgba(0,0,0,0);
		}
		.close:hover{
			opacity: .1;
			transform: scale(1.2);
		}
		/* .btn-ani{
			-webkit-animation-name: anibtn;
			        animation-name: anibtn;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		} */
		.popup_select_component-ani{
			-webkit-animation-name: anipopup_select_component;
			        animation-name: anipopup_select_component;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		.sendbtn-ani{
			-webkit-animation-name: anisendbtn;
			        animation-name: anisendbtn;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		.close-ani{
			-webkit-animation-name: aniclose;
			        animation-name: aniclose;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@-webkit-keyframes aniclose{
			0% {bottom: 0;left: 0}
			100%{bottom: -60vh;left: -100vw}
		}
		@keyframes aniclose{
			0% {bottom: 0;left: 0}
			100%{bottom: -60vh;left: -100vw}
		}
		.closetotop-ani{
			-webkit-animation-name: aniclosetop;
			        animation-name: aniclosetop;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@keyframes aniclosetop{
			0% {bottom: 0;}
			100%{bottom: -60vh;}
		}
		.closetoleft-ani{
				-webkit-animation-name: anicloseleft;
				        animation-name: anicloseleft;
				-webkit-animation-duration: 0.6s;
				        animation-duration: 0.6s;
				-webkit-animation-timing-function:ease-in-out;
				        animation-timing-function:ease-in-out;
				-webkit-animation-fill-mode:forwards;
				        animation-fill-mode:forwards;
		}
		@keyframes anicloseleft{
			0% {left: 0;bottom: 0}
			100%{left: -100vw;bottom: 0}
		}
		.closetoright-ani{
				-webkit-animation-name: anicloseright;
				        animation-name: anicloseright;
				-webkit-animation-duration: 0.6s;
				        animation-duration: 0.6s;
				-webkit-animation-timing-function:ease-in-out;
				        animation-timing-function:ease-in-out;
				-webkit-animation-fill-mode:forwards;
				        animation-fill-mode:forwards;
		}
		@keyframes anicloseright{
			0% {left: 0;bottom: 0}
			100%{left: 100vw;bottom: 0}
		}
		.closetobottom-ani{
				-webkit-animation-name: aniclosebottom;
				        animation-name: aniclosebottom;
				-webkit-animation-duration: 0.6s;
				        animation-duration: 0.6s;
				-webkit-animation-timing-function:ease-in-out;
				        animation-timing-function:ease-in-out;
				-webkit-animation-fill-mode:forwards;
				        animation-fill-mode:forwards;
		}
		@keyframes aniclosebottom{
			0% {left: 0;bottom: 0vh}
			100%{left: 0;bottom: 100vh}
		}
		.popuptotop-ani{
			-webkit-animation-name: anipopuptop;
			        animation-name: anipopuptop;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@-webkit-keyframes anipopuptop{
			0% {bottom: -60vh}
			50% {bottom: -4vh}
			65% {bottom: -4.5vh}
			75% {bottom: -1vh}
			100%{bottom: 0}
		}
		@keyframes anipopuptop{
			0% {bottom: -60vh;left:0;}
			50% {bottom: -4vh;left:0;}
			65% {bottom: -4.5vh;left:0;}
			75% {bottom: -1vh;left:0;}
			100%{bottom: 0;left:0;}
		}
		.popuptoleft-ani{
			-webkit-animation-name: anipopupleft;
			        animation-name: anipopupleft;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@keyframes anipopupleft{
			0% {left: -100vw;bottom: 0}
			50% {left: -4vw;bottom: 0}
			65% {left: -4.5vw;bottom: 0}
			75% {left: -1vw;bottom: 0}
			100%{left: 0;bottom: 0}
		}
		.popuptoright-ani{
			-webkit-animation-name: anipopupright;
			        animation-name: anipopupright;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@keyframes anipopupright{
			0% {left: 100vw;bottom: 0;}
			50% {left: 4vw;bottom: 0;}
			65% {left: 4.5vw;bottom: 0;}
			75% {left: 1vw;bottom: 0;}
			100%{left: 0;bottom: 0;}
		}
		.popuptobottom-ani{
			-webkit-animation-name: anipopupbottom;
			        animation-name: anipopupbottom;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@keyframes anipopupbottom{
			0% {bottom: 100vh;left:0;}
			50% {bottom: -4vh;left:0;}
			65% {bottom: -4.5vh;left:0;}
			75% {bottom: -1vh;left:0;}
			100%{bottom: 0;left:0;}
		}
		

	</style>
<style>
    #btn {
        width: 60px;
        height: 60px;
        position: fixed;
        /* //固定定位设置 */
        right: 30px;
        bottom: 30px;
        background-color: rgb(207, 207, 207);
        border-radius: 30px;
        display: none;
        justify-content: center;
        align-items: center;
        color: honeydew;
    }

    .box {
        /* border: solid 1px #C9C9C9; */
        margin: 10px;
    }

    /* 如果list没给高度则给一个默认高度 */
    .iframe-card {
        height: 40vh;
    }

    .word-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

    }

    .word {
        /* margin:10px !important; */
        /* border: 1px solid #C9C9C9; */
        background-color: #fff;
        font-size: 12px;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
        padding: 7px;
        background-color: gray;
        transition: all 0.6s;

    }

    .word:hover {
        transform: scale(1.2);
    }

    .show_component {
        border: 1px solid #C9C9C9;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-top: 10px;
    }

    .btn-card {
        /* background-color: rgba(0, 0, 0, 0.507); */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
    }

    .btn-card .small {
        margin-right: 5px;
    }
    .avatar{
        margin: 10px;
        margin-bottom: 0px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .author-info{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .author-info .name{
        font-size: 14px;
        color: #444;
        line-height: 25px;
    }
    .author-info .tag{
        color: #aaa;
        font-size: 14px;
        line-height: 22px;
    }
    .author-info button{
        margin-left: auto;
        margin-right: 10px;
    }
    .bar{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
	.xx-waterflow{
		width: 100%;
		height: 100%;
		position: relative;
	}
	
</style>

	<!-- ugc / 非全屏弹出框 start-->
	<div class="popup_select_component" data-openani='popup-ani' data-closeani='close-ani' style="position: fixed;bottom: -60vh;height: 60vh;width: 100%;background-color: #000;opacity: 0.9;color: #fff;">
		<i class="close">&#10005;</i>
		<div style="display: flex;flex-direction: row;width: 100%;margin-top: 40px;padding: 0 10px;height: calc(100% - 40px);">
			<div style="margin-left:10px;flex:1;display: flex;flex-direction: column;padding-right: 10px;align-items: center;justify-content: center;">
				<div id="component_list" ></div>
			</div>
			<div style="flex:4;overflow: hidden;overflow-x: scroll;">
				<div id="component_type_list" class="xx-waterflow" ></div>
			</div>
		</div>
	</div>

	<script type="text/javascript" id="modelscript">
		//加载component_select
		$('#component_list').load("select_component.html");

		//阻止弹出框的点击事件冒泡
		$('.popup_select_component').click(function(event){
			event.stopPropagation();
		});
		//点击除了弹出框以及触发弹出框弹出的按钮，使弹出框的返回
		$(document).click(function(event){
			var popup_select_component=$('.popup_select_component'),
			popupbtn_select_component=$('.popupbtn_select_component'),
			popup_select_component_closeani=popupbtn_select_component.data('closeani'),
			popup_select_component_openani=popupbtn_select_component.data('openani');
			target=$(event.target);
			if (target.hasClass('popupbtn_select_component')||$(target).hasClass('popup_select_component')) {
				return false;
			}
			//如果当前弹出框是出现状态，则点击后触发弹框返回
			if(popup_select_component.hasClass(popup_select_component_openani)){
				popup_select_component.removeClass(popup_select_component_openani).addClass(popup_select_component_closeani);
			}
		});
		//open按钮事件
		$('.popupbtn_select_component').on('click',function(event){
			//阻止冒泡
			
			var popup_select_component=$('.popup_select_component'),
			btn=$(this),
			popup_select_component_closeani=btn.data('closeani'),
			popup_select_component_openani=btn.data('openani'),
			btnani=btn.data('btnani');
			popup_select_component.removeClass(popup_select_component_openani).removeClass(popup_select_component_closeani);
			btn.removeClass(btnani);
			setTimeout(function(){
				popup_select_component.addClass(popup_select_component_openani);
				btn.addClass(btnani);
			});
		});

		//弹出框的关闭按钮事件
		$('.close').on('click',function(event){
			//阻止冒泡
			event.stopPropagation();
			var popup_select_component=$('.popup_select_component'),
			popupbtn_select_component=$('.popupbtn_select_component'),
			popup_select_component_closeani=popupbtn_select_component.data('closeani'),
			popup_select_component_openani=popupbtn_select_component.data('openani');
			popup_select_component.removeClass(popup_select_component_openani).addClass(popup_select_component_closeani);
			
		});
		
	</script>
	<!-- ugc / 非全屏弹出框 end-->